<!--
  用户管理-企业用户-身份认证页面
 -->
<template>
  <div class="app-container">
    <!-- 查看/编辑 -->
    <el-dialog
      title="查看"
      :visible.sync="checkDialog"
      width="50%"
      append-to-body
    >
      <el-tabs v-model="activeCheck" type="card">
        <el-tab-pane label="用户信息" name="userForm">
          <p>用户信息</p>
          <el-form ref="userForm" :model="userForm" label-width="80px">
            <el-form-item label="姓名" prop="applyUserName">
              <el-input
                v-model="userForm.applyUserName"
                disabled
                placeholder="请输入姓名"
              />
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                v-model="userForm.companyName"
                disabled
                placeholder="请输入企业名称"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input
                v-model="userForm.phoneNumber"
                disabled
                placeholder="请输入手机号"
              />
            </el-form-item>
            <el-form-item label="部门" prop="dept">
              <el-input
                v-model="userForm.dept"
                disabled
                placeholder="请输入部门"
              />
            </el-form-item>
            <el-form-item label="职位" prop="job">
              <el-input
                v-model="userForm.job"
                disabled
                placeholder="请输入职位"
              />
            </el-form-item>
            <el-form-item label="座机号" prop="tel">
              <el-input
                v-model="userForm.tel"
                disabled
                placeholder="请输入座机号"
              />
            </el-form-item>
            <el-form-item label="邮箱号" prop="email">
              <el-input
                v-model="userForm.email"
                disabled
                placeholder="请输入邮箱号"
              />
            </el-form-item>
            <el-form-item label="账户类型">
              <el-select disabled value="1">
                <el-option value="1" label="企业管理员">企业管理员</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号码" prop="cardNo">
              <el-input
                v-model="userForm.cardNo"
                disabled
                placeholder="请输入身份证号码"
              />
            </el-form-item>
            <el-form-item label="身份证正面">
              <img
                v-imgError
                :src="userForm.authenticationFrontPictureUrl || ''"
                style="height: 146px"
                alt="身份证正面"
              >
            </el-form-item>
            <el-form-item label="身份证反面">
              <img
                v-imgError
                :src="userForm.authenticationBackPictureUrl || ''"
                style="height: 146px"
                alt="身份证反面"
              >
            </el-form-item>
            <el-form-item label="在职证明">
              <img
                v-imgError
                :src="dataUrl"
                style="height: 146px"
                alt="在职证明"
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业信息" name="second">
          <el-form ref="companyForm" :model="companyForm" label-width="150px">
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input
                v-model="companyForm.creditCode"
                disabled
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
            <el-form-item label="营业执照图片" prop="businessLicense">
              <img
                v-imgError
                :src="companyForm.businessLicense"
                style="width: 146px; height: 146px"
                alt="营业执照"
              >
            </el-form-item>
            <el-form-item label="行业类型" prop="industryType">
              <el-cascader
                v-model="companyForm.industryType"
                disabled
                :show-all-levels="false"
                :options="businessAreaData"
              />
            </el-form-item>
            <el-form-item label="邮政编码" prop="postCode">
              <el-input
                v-model="companyForm.postCode"
                disabled
                placeholder="请输入邮政编码"
              />
            </el-form-item>
            <el-form-item label="经营状态" prop="businessStatus">
              <el-radio-group v-model="companyForm.businessStatus" disabled>
                <el-radio
                  v-for="dict in this.getDictDatas(
                    DICT_TYPE.COMPANY_BUSINESS_STATUS
                  )"
                  :key="dict.value"
                  :label="dict.value"
                >{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="注册资本（元）" prop="registeredCapital">
              <el-input
                v-model="companyForm.registeredCapital"
                disabled
                placeholder="请输入注册资本"
              />
            </el-form-item>
            <el-form-item label="成立日期" prop="establishDate">
              <el-date-picker
                v-model="companyForm.establishDate"
                disabled
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择成立日期"
              />
            </el-form-item>
            <el-form-item label="法定代表人" prop="legalPerson">
              <el-input
                v-model="companyForm.legalPerson"
                disabled
                placeholder="请输入法定代表人"
              />
            </el-form-item>
            <el-form-item v-if="companyForm.legalPersonFrontPictureUrl" label="法人身份证正面">
              <img
                v-imgError
                :src="companyForm.legalPersonFrontPictureUrl || ''"
                style="height: 146px"
                alt="法人身份证正面"
              >
            </el-form-item>
            <el-form-item v-if="companyForm.legalPersonBackPictureUrl" label="法人身份证反面">
              <img
                v-imgError
                :src="companyForm.legalPersonBackPictureUrl || ''"
                style="height: 146px"
                alt="法人身份证反面"
              >
            </el-form-item>
            <el-form-item v-if="companyForm.subCompanyRelationshipCertificatePicture" label="子企业关系证明图片">
              <img
                v-imgError
                :src="companyForm.subCompanyRelationshipCertificatePicture"
                style="width: 146px; height: 146px"
                alt="营业执照"
              >
            </el-form-item>
            <el-form-item label="企业规模" prop="scale">
              <el-select
                v-model="companyForm.scale"
                disabled
                placeholder="请输入企业规模"
              >
                <el-option
                  v-for="dict in this.getDictDatas(DICT_TYPE.ENTERPRISE_SCALE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业类型" prop="companyType">
              <el-select
                v-model="companyForm.companyType"
                disabled
                placeholder="请选择企业状态"
              >
                <el-option
                  v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="注册地址" prop="provinceAndCity">
              <el-cascader
                v-model="companyForm.provinceAndCity"
                :options="provinceAndCityData"
                disabled
                placeholder="--"
              />
            </el-form-item>
            <el-form-item label="详细地址" prop="registeredAddress">
              <el-input
                v-model="companyForm.registeredAddress"
                disabled
                placeholder="请输入详细地址"
              />
            </el-form-item>
            <el-form-item label="经营范围" prop="businessScope">
              <el-input
                v-model="companyForm.businessScope"
                type="textarea"
                disabled
                placeholder="请输入经营范围"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="身份认证" name="third">
          <el-tag v-if="isAuth && isAuth.indexOf('认证成功') > -1" type="success">{{ isAuth || '三要素已实名认证' }}</el-tag>
          <el-tag v-else type="warning">{{ isAuth || '三要素实名认证失败' }}</el-tag>
        </el-tab-pane>
      </el-tabs>
      <el-row type="flex" class="row-bg" justify="end">
        <el-button @click="checkDialog = false">取 消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

import { getCompanyUserInfo } from '@/api/school-admin-api/userManage/company/index.js'
import { deepClone } from '@/utils/index'
import businessAreaData from '@/utils/businessAreaData.js'
import moment from 'moment'
import { provinceAndCityData, getProvinceAndCityDataValue } from '@/utils/frontDataDict.js'

export default {
  name: 'CompanyDetail',
  components: {
  },
  data() {
    return {
      activeCheck: 'userForm',
      // 查看审核详情弹窗
      checkDialog: false,
      businessAreaData,
      // 用户信息表
      userForm: {
        applyUserName: '',
        dept: '',
        job: '',
        tel: '',
        email: '',
        companyName: '',
        phoneNumber: '',
        authenticationFrontPictureUrl: '', // 身份证正面
        authenticationBackPictureUrl: '', // 身份证反面
        cardNo: '', // 身份证号码
        onjobUrl: '' // 在职证明
      },
      provinceAndCityData,
      // 企业信息表
      companyForm: {
        creditCode: '', // 统一信用代码
        businessLicense: '', // 营业执照
        industryType: [], // 行业类型
        postCode: '', // 邮政编码
        businessStatus: '', // 经营状态
        registeredCapital: '', // 注册资本
        establishDate: '', // 成立日期
        legalPerson: '', // 法人
        legalPersonFrontPictureUrl: '', // 法人身份证正面
        legalPersonBackPictureUrl: '', // 法人身份证反面
        subCompanyRelationshipCertificatePicture: '', // 子母企业关系证明
        scale: '', // 企业规模
        companyType: '', // 企业类型
        registeredAddress: '', // 注册地址
        businessScope: '' // 经营范围
      },
      currentRow: null,
      dataUrl: '',
      isAuth: false // 企业提交手机号变更的新手机，是否完成了阿里云三要素的审核
    }
  },
  created() {
  },
  methods: {
    init(data) {
      this.dataUrl = data.dataUrl
      this.isAuth = data.authStatus
      getCompanyUserInfo({
        userId: data.userId,
        companyId: data.companyId
      }).then((res) => {
        if (res.code === 0 && res.data) {
          res.data.establishDate =
                        typeof res.data.establishDate === 'number'
                          ? moment(res.data.establishDate).format('yyyy-MM-DD')
                          : ''
          for (const key in res.data) {
            if (Object.hasOwnProperty.call(this.userForm, key)) {
              this.userForm[key] = deepClone(res.data[key])
            }
            if (Object.hasOwnProperty.call(this.companyForm, key)) {
              this.companyForm[key] = deepClone(res.data[key])
            }
          }

          try {
            (res.data.city && res.data.province) &&
                        (this.companyForm.provinceAndCity = getProvinceAndCityDataValue(res.data.province + res.data.city) || '')
          } catch {
            () => {}
          }
          try {
            this.companyForm.industry = JSON.parse(this.companyForm.industry)
          } catch {
            () => {}
          }

          // this.title = '查看企业'
          setTimeout(() => {
            this.checkDialog = true
          })
        }
      })
    }
  }
}
</script>

